<template>
	<view class="content">
		<text id="tv_title">提现到</text>



		<view class="bank_line">
			<view class="radio_line">
				<radio class="radio" checked="txBean.bank!=null" color="#3280F5"></radio> <text
					class="radio_text">银行卡</text>
			</view>
			<view class="bankcard-info" @click="clickBankInfo">
				<text v-if="txBean.bank.bank_txt!=null" id="tv_bank_info" ref="tv-bankinfo">{{selectBank.bank_txt}}</text>
				<image v-if="txBean.bank.bank_txt!=null" class="ivright" src="../../static/r_jiantou.png"></image>
			</view>

			<text class="add" v-if="txBean.bank.bank_txt==null" @click="goBankAdd()">添加</text>

		</view>

		<view class="card_view">

			<text style="margin-top: 30rpx; margin-left: 30rpx; color: #333; ">提现金额</text>
			<view class="edit_text_line">
				<text id="price_unit">￥</text>
				<input ref="inputRef" class="money-input" type="digit" placeholder="请输入提现金额" :value="txmoney"
					@input="inputMoney" />
			</view>

			<view class="line" style="margin-left: 30rpx; margin-right: 30rpx; margin-top: 30rpx;">

				<view class="tx_meney_info">
					<text id="can_tx_meney">可提现金额{{txBean.earnings_money}}元</text>
					<text id="btn_tx_all" @click="allTx">全部提现</text>


				</view>
			</view>

		</view>

		<uni-popup ref="popup" type="center" width="100%">

			<view class="pop_content">
				<text id="pop_title">提现信息</text>
				<view class="pop_row">
					<text class="left">持卡人：</text>
					<text class="right">{{selectBank.bank_user}}</text>
				</view>
				<view class="pop_row">
					<text class="left">银行卡：</text>
					<text class="right">{{selectBank.bank_txt}}</text>
				</view>
				<view class="pop_row">
					<text class="left">提现金额：</text>
					<text class="right">{{txmoney}}元</text>
				</view>

				<view class="pop_last_line">
					<text class="cancle" @click="canclePop">取消</text>
					<text class="confrim" @click="confirmPop">确定</text>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="popup_bank" type="bottom" width="100%">

			<view class="popbank_content">
				<view class="title-bankPop">
					<image src="../../static/finance/cha_hao.png" id="pop-close" @click="closePopBank()"></image>
					<text id="pop_text">选择到账银行卡</text>
				</view>
				<view class="line"></view>
				<scroll-view scroll-y="true" style="max-height:481rpx ;">

					<block v-for="(item,index) in bankList">
						<view class="list-item">
							<view @click="clickChoseBank(index)" style="display: flex; justify-content: space-between;  align-items: center;">
								<text class="item-text"  ref="tvBankInfo">{{item.bank_txt}}</text>
								<image src="../../static/finance/iv_dui_gou.png" style="width: 30rpx; height: 30rpx; margin-right: 30rpx;" v-if="item.id == selectBank.id"></image>
							</view>
							
							<view class="line" style="margin-left:30rpx; margin-right: 30rpx;"></view>
						</view>
					</block>
				</scroll-view>
				<view class="list-item">
					<text class="item-text" @click="goBankAdd()">使用新卡提现</text>
					<view class="line" style="margin-left:30rpx; margin-right: 30rpx;"></view>
				</view>

			</view>
		</uni-popup>

		<button @click="openTxPop" id="btnTx"
			style=" margin-left: 30rpx; margin-right: 30rpx; background-color: #3280F5; color: white; margin-top: 80rpx; font-size: 30rpx;">提现</button>

	</view>



	</view>
</template>

<script>
	import api from "@/api/api.js";
	import ajax from "@/api/api.js";
	import url from '@/api/url.js';
	export default {
		data() {
			return {
				txBean: {},
				txmoney: '',
				bank_id: '',
				bankList: [],
				selectBank:{},
			};

		},

		onLoad() {

		},

		onShow() {
			this.getTxdetails();
			this.getBankList();
		},

		methods: {
			getBankList() {
				ajax(url.myBank, {

				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							title: res.data.msg
						})
						return;
					}
					this.bankList =res.data.data
					console.log("this.bankList============"+this.bankList)
				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh();
				});


			},
			
			
			getTxdetails() {
				ajax(url.txEarningsDetail, {
			
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							title: res.data.msg
						})
						return;
					}
					this.txBean = res.data.data
					this.bank_id = this.selectBank.id
					this.selectBank =this.txBean.bank
					console.log("bank_id的值==========>" + this.bank_id)
				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh();
				});
			
			
			},
			
			

			allTx() {
				this.txmoney = this.txBean.earnings_money
			},
			inputMoney(event) {
				this.txmoney = event.detail.value
			},
			openTxPop() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (this.txmoney == '') {
					uni.showToast({
						icon: 'none',
						title: "没有输入提现金额 "
					})
					return;
				}
				if (this.txmoney < 10) {
					uni.showToast({
						icon: 'none',
						title: "提现金额不能小于10元"
					})
					return;
				}
				this.$refs.popup.open()

			},

			clickBankInfo() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup_bank.open()
			},

			canclePop() {
				this.$refs.popup.close()
			},
			confirmPop() {
				this.$refs.popup.close()
				this.postTx();
			},
			postTx() {
				this.$londing();
				ajax(url.txApply, {
					data: {
						// #ifdef MP-WEIXIN
						// #endif
						is_xcx: 1,
						is_wx: 2, //1.微信 2.银行卡
						type: 2,
						money: this.txmoney,
						bank_id: this.selectBank.id,
						is_dao: 1, //1实时到账 2次日到账


					}
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					if (res.data.code != 1) {
						return
					}else{
						uni.showToast({
							icon : 'success',
							title: res.data.msg
						})
					}

					uni.navigateBack()



				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh();
				});
			},

			goBankAdd() {
				uni.navigateTo({
					url: 'bank-add'
				})
			},

			//點擊選擇銀行卡關閉按鈕
			closePopBank() {
				this.$refs.popup_bank.close()
			},
			
			clickChoseBank(index){
				this.selectBank =this.bankList[index] 
				this.$refs.popup_bank.close()
			}


		}
	}
</script>

<style lang="scss">
	.content {
		background-color: $app-page-color;
		height: 100vh;
		display: flex;
		flex-direction: column;

		#tv_title {
			font-weight: 500;
			font-size: 30rpx;
			margin-top: 32rpx;
			margin-left: 31rpx;
		}

		.bank_line {
			padding-right: 30rpx;
			padding-left: 30rpx;
			margin-top: 10rpx;
			align-items: center;
			justify-content: space-between;
			height: 118rpx;
			display: flex;
			flex-direction: row;
			background-color: white;


			.radio_line {
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: row;

				.radio {
					color: $app-staus-color;
					/* 设置间距 */
				}

				.radio_text {
					color: #333;
					font-weight: bold;
					margin-left: 17rpx;
					font-size: 30rpx;
				}

			}

			.bankcard-info {
				display: flex;
				align-items: center;
				flex: 1;

				#tv_bank_info {
					flex: 1;
					text-align: center;
					align-items: center;
					color: #333;
					font-weight: bold;
					font-size: 30rpx;
				}


				.ivright {
					text-align: center;
					align-items: center;
					width: 32rpx;
					height: 32rpx;
				}
			}



			.add {
				margin-right: 30rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #3280F5;
				line-height: 70rpx;
			}

		}

		.card_view {
			background-color: white;
			height: 380rpx;
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;

			.edit_text_line {
				margin-top: 30rpx;
				margin-left: 30rpx;
				align-items: center;
				display: flex;
				flex-direction: row;

				#price_unit {
					font-size: 70rpx;
					font-weight: bold;
				}

				.money-input {
					height: 100%;
					color: #333;
					font-size: 90rpx;
					flex: 1;
					background-color: #FFFFFF;
				}
			}


			.tx_meney_info {
				margin-top: 24rpx;
				justify-content: space-between;
				display: flex;

				#can_tx_meney {
					color: #666;
					font-size: 28rpx;
				}

				#btn_tx_all {
					font-size: 28rpx;
					color: $app-staus-color;

				}
			}


		}

		.pop_content {
			border-radius: 20rpx;
			width: 90vw;
			align-items: center;
			background-color: white;
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;

			#pop_title {
				color: #333;
				margin-top: 45rpx;
				font-weight: bold;
				font-size: 34rpx;
			}

			.pop_row {
				margin-top: 50rpx;
				width: 75vw;
				justify-content: space-between;
				display: flex;

				.left {
					font-size: 32rpx;
					color: #333;
				}

				.right {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.pop_last_line {
				margin-top: 70rpx;
				align-items: center;
				height: 88rpx;
				display: flex;
				justify-content: space-around;
				width: 90vw;

				.cancle {
					color: #666;
					font-weight: bold;
					font-size: 34rpx;
					border-radius: 0rpx 0rpx 0rpx 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					text-align: center;
					width: 100%;
					background-color: #E8F1FF;
				}

				.confrim {
					background-color: $app-staus-color;
					color: white;
					font-weight: bold;
					font-size: 34rpx;
					border-radius: 0rpx 0rpx 20rpx 0rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					text-align: center;
					width: 100%;
				}
			}



		}

		.popbank_content {
			max-height: 800rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			width: 100vw;
			background-color: white;
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;

			.title-bankPop {
				height: 140rpx;
				margin-right: 27rpx;
				margin-left: 27rpx;
				align-items: center;
				display: flex;


				#pop-close {
					width: 30rpx;
					height: 30rpx;
				}

				#pop_text {
					color: #333;
					font-size: 34rpx;
					justify-content: center;
					display: flex;
					flex: 1;
				}

			}

			.list-item {
				flex-direction: column;
				display: flex;

				.item-text {

					display: flex;
					align-items: center;
					margin-bottom: 53rpx;
					margin-top: 53rpx;
					margin-left: 81rpx;
					color: #333;
					font-size: 32rpx;
				}
			}
		}

	}
</style>